<template>
  <view :class="theme">
    <view class="pt-20">
      <view @click="viewContent(index)" v-for="(item, index) in notices.list" :key="index"
        class="bg-2 br-12 oh p-24 fd-row" style="margin: 0 30rpx 20rpx;">
        <u-image radius="12" width="200" height="148" :src="item.image" />
        <view class="ml-20 jc-sb">
          <text class="multi-ellipsis fs-28 fw-700 color-3">{{ item.title }}</text>
          <text class="color-14 fw-500">{{ item.create_at }}</text>
        </view>
      </view>
      <view class="mt-30 mb-30 ai-center">
        <u-image v-if="!notices.list.length" :showLoading="false" width="400" height="400" class="mt-60 mb-30"
          src="/static/img/blank.png" mode="aspectFit" />
        <u-loadmore :status="notices.status" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { transformURL } from "@/common/libs/utils";
import { onTabItemTap, onPullDownRefresh, onLoad } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);

const notices = reactive({
  list: [] as any[],
  status: "more",
});

onPullDownRefresh(() => {
  notices.status = "loading";
  uni.request({
    url: "/ruleContent",
    data: { type: 119 },
    success({ data }: any) {
      if (!Array.isArray(data)) return;
      notices.list = data;
      notices.status = "nomore"
    }
  });
  setTimeout(uni.stopPullDownRefresh, 360);
})

onTabItemTap((e) => {
  uni.setTabBarStyle({
    backgroundColor: "#ffffff",
    borderStyle: "white",
  });
});

const viewContent = (index: number) => {
  const { content, title } = notices.list[index];
  uni.setStorageSync("richText", content);
  uni.navigateTo({
    url: transformURL("/pages/common/webview",
      {
        title: encodeURIComponent(title),
        url: encodeURIComponent(transformURL("/document.html", { title }))
      }
    )
  });
}

onLoad(() => {
  uni.startPullDownRefresh();
})

</script>

<style lang="scss" scoped>
// scss
</style>